<template>
  <div>
    <div>
      <el-button @click="locale = 'zh'">中文</el-button>
      <el-button @click="locale = 'en'">English</el-button>
    </div>
    <div>
      <el-button>{{ t('gwc') }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 要素一, 当前语言设定
      locale: 'en',
      // 要素二, 字典文字材料
      messages: {
        zh: {
          sayHi: '亲, 欢迎回来',
          missu: '太想你了',
          gwc: '购物车'
        },
        en: {
          sayHi: 'Dear, welcome back',
          missu: 'mise u very much',
          gwc: 'shopping cart'
        }
      }
    }
  },
  created() {
    console.log(this.$i18n)
    console.log(this.$t)
  },
  methods: {
    // 要素三, 翻译功能函数
    // 可以接受一个标识, 根据当前的语言设定, 返回对应的结果
    t(str) {
      // 1. 根据语言设定拿出字典
      const dict = this.messages[this.locale]
      // 2. 在字典中查找对应翻译并返回
      const res = dict[str]
      return res
    }
  }
}
</script>

<style>

</style>
